<template>
  <div @click="handleCellClick" class="cell-wrap">
    <template v-if="$slots.left">
      <div class="left-box">
        <slot name="left"></slot>
      </div>
    </template>

    <div
      class="right-box"
      :style="{
        'justify-content':
          $slots.right || $slots.left
            ? 'space-between'
            : '',
      }"
    >
      <template v-if="$slots.default">
        <div class="default">
          <slot></slot>
        </div>
      </template>
      <template v-if="$slots.right">
        <div class="right">
          <slot name="right"></slot>
        </div>
      </template>
      <div class="border"></div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleCellClick() {
      if (this.to) {
        this.$router.push(this.to)
        return
      }
      console.log("hi")
      this.$emit("click")
    },
  },
  props: ["to"],
}
</script>

<style lang="scss" scoped>
.cell-wrap {
  background-color: $white;
  padding: 10px;
  position: relative;
  display: flex;

  .left-box {
    margin-right: 10px;
  }

  .right-box {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    .border {
      position: absolute;
      border: 1px solid $border-color;
      width: 100%;
      transform: scaleY(0.5);
      bottom: -10px;
    }
  }
}

.cell-wrap:last-child {
  .border {
    display: none;
  }
}
</style>
